<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
   
    <link rel="stylesheet" href="css/community.css">
    <style>
        body {
          width: 100%;
        }
        div.container {
          width: 70%;
          margin: 0 auto;
          border-radius: 20px;
        }
        button.accordion {
          background-color: rgb(253, 245, 175);
          color: #444;
          cursor: pointer;
          padding: 18px;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 15px;
          transition: 0.4s;
        }
        button.accordion.active,
        button.accordion:hover {
          background-color: rgb(255, 199, 166);
        }
        div.panel {
          padding: 0 18px;
          background-color: rgb(252, 250, 232);
          /* max-height: 0; */
          /* overflow: hidden; */
          transition: max-height 0.2s ease-out;
        }
        .touxiang{
        width: 50px; /* 或者你想要的大小 */
        height: 50px; /* 和宽度相同 */
        border-radius: 50%; /* 创建圆形 */
      }
      .col-md-3 a img{
        transition: transform 0.3s
        
      }
      .col-md-3 a img:hover{
        transform: scale(1.2);
      }
      .jihuo{
        display: block;
      }
      body{
        color: white;
        background-image: url(images/body-bg.png);
      }
      nav{
        background-image: url(images/nav-bg.png);
        color: white;
      }
      </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="navbar-brand ">
      <a href="#" class="div1" style="text-decoration: none; color: black;">
      <img src="images/tou1.jpg" alt="" class="touxiang">
      <span id="userName"style="color: white;"></span>
    </a>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html"style="color: white;">首页<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="game.html"style="color: white;">游戏</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="community.html"style="color: white;">社区</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="More.html"style="color: white;">更多游戏</a>
        </li>
        <li class="nav-item">
            <a class="nav-link"style="color: white;"href="login.html">登录/注册</a>
          </li>
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle xiaLa" type="button" data-toggle="dropdown" aria-expanded="false">
              帮助
            </button>
            <div class="dropdown-menu bg-light" >
              <a class="dropdown-item" href="#">客服</a>
              <a class="dropdown-item" href="#">用户协议</a>
              <a class="dropdown-item" href="#">隐私政策</a>
            </div>
          </div>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
      </form>
    </div>
  </nav>
    <div class="container">
        <h2>游戏社区</h2>
        <p>点击以下选项显示折叠内容</p>
        <button class="accordion active" >csgo吧</button>
        <div class="panel">
          <p >
            <div class="main" style="display: block;background-image: url(images/csgo.jpeg) ;background-repeat: no-repeat;">
              <div class="comment-send box">
                <div class="user-face">
                  <img id="avatar" src="images/0.jpg" alt="" />
                </div>
                <div class="textarea-comtainer">
                  <input type="text" placeholder="请输入匿名昵称" id="name" />
                  <textarea name="" id="txt" placeholder="发一条友善的评论"></textarea>
                  <button class="comment-submit" id="btn">发表<br />评论</button>
                </div>
              </div>
              <div class="reply-wrap box"style="color: white;">
                <div class="user-face"></div>
                <!-- 装载已发表的评论 -->
                <div class="right">
                  <div class="reply-item">
                    <div class="user">
                      <div class="user-face">
                        <img src="images/user-1.jpg" alt="" />
                      </div>
                      <div class="user-name"style="color: white;">先生夏</div>
                      <p>上海major即将开始！！</p>
                    </div>
                    <div class="info">
                      <span>2021-10-16 11:58</span>
                      <span>28460</span>
                      <span></span>
                      <span><a class="remove" href="#">删除</a></span>
                    </div>
                  </div>
                  <div class="reply-item">
                    <div class="user">
                      <div class="user-face">
                        <img src="images/user-2.jpg" alt="" />
                      </div>
                      <div class="user-name"style="color: white;">梓川枫的熊猫</div>
                      <p>小蜜蜂一定夺冠</p>
                    </div>
                    <div class="info">
                      <span>2021-10-16 11:58</span>
                      <span>324</span>
                      <span></span>
                      <span><a class="remove" href="#">删除</a></span>
                    </div>
                  </div>
                  <div class="reply-item">
                    <div class="user">
                      <div class="user-face">
                        <!-- <img src="images/user-3.jpg" alt="" /> -->
                        <img src="images/0.jpg" alt="" />
                      </div>
                      <div class="user-name"style="color: white;">猫一撮先生</div>
                      <p>在我主页有上海major的战队分析</p>
                    </div>
                    <div class="info">
                      <span>2021-10-16 12:09</span>
                      <span>493</span>
                      <span></span>
                      <span><a class="remove" href="#">删除</a></span>
                    </div>
                  </div>
                </div>
              </div>
              </div>
              <div id="new"></div>
          </p>
        </div>
  
        <button class="accordion" >星露谷物语吧</button>
        <div class="panel">
          <p >
            <div class="main" style="display: none;background-image: url(images/lunbo3.jpg);background-repeat: no-repeat;">
              <div class="comment-send box">
                <div class="user-face">
                  <img id="avatar" src="images/0.jpg" alt="" />
                </div>
                <div class="textarea-comtainer">
                  <input type="text" placeholder="请输入匿名昵称" id="name" />
                  <textarea name="" id="txt" placeholder="发一条友善的评论"></textarea>
                  <button class="comment-submit" id="btn">发表<br />评论</button>
                </div>
              </div>
              <div class="reply-wrap box" style="color: white;">
                <div class="user-face" ></div>
                <!-- 装载已发表的评论 -->
                <div class="right">
                  <div class="reply-item">
                    <div class="user">
                      <div class="user-face">
                        <img src="images/user-1.jpg" alt="" />
                      </div>
                      <div class="user-name" style="color: white;">先生夏</div>
                      <p>为什么我的镰刀不能收割作物</p>
                    </div>
                    <div class="info">
                      <span>2021-10-16 11:58</span>
                      <span>28460</span>
                      <span></span>
                      <span><a class="remove" href="#">删除</a></span>
                    </div>
                  </div>
                  <div class="reply-item">
                    <div class="user">
                      <div class="user-face">
                        <img src="images/user-2.jpg" alt="" />
                      </div>
                      <div class="user-name"style="color: white;">梓川枫的熊猫</div>
                      <p>求钓鱼攻略</p>
                    </div>
                    <div class="info">
                      <span>2021-10-16 11:58</span>
                      <span>324</span>
                      <span></span>
                      <span><a class="remove" href="#">删除</a></span>
                    </div>
                  </div>
                  <div class="reply-item">
                    <div class="user">
                      <div class="user-face">
                        <!-- <img src="images/user-3.jpg" alt="" /> -->
                        <img src="images/0.jpg" alt="" />
                      </div>
                      <div class="user-name"style="color: white;">猫一撮先生</div>
                      <p>如何快速获得五彩碎片</p>
                    </div>
                    <div class="info">
                      <span>2021-10-16 12:09</span>
                      <span>493</span>
                      <span></span>
                      <span><a class="remove" href="#">删除</a></span>
                    </div>
                  </div>
                </div>
              </div>
              </div>
              <div id="new"></div>
          </p>
        </div>
  
        <button class="accordion" >荒野猎人吧</button>
        <div class="panel">
          <p >
            <div class="main" style="display: none;background-image: url(images/lunbo2.png);background-repeat: no-repeat;">
              
              <div class="comment-send box" >
                <div class="user-face">
                  <img id="avatar" src="images/0.jpg" alt="" />
                </div>
                <div class="textarea-comtainer">
                  <input type="text" placeholder="请输入匿名昵称" id="name" />
                  <textarea name="" id="txt" placeholder="发一条友善的评论"></textarea>
                  <button class="comment-submit" id="btn">发表<br />评论</button>
                </div>
              </div>
              <div class="reply-wrap box" style="color: white;">
                <div class="user-face" ></div>
                <!-- 装载已发表的评论 -->
                <div class="right">
                  <div class="reply-item">
                    <div class="user">
                      <div class="user-face">
                        <img src="images/user-1.jpg" alt="" />
                      </div>
                      <div class="user-name" style="color: white;">先生夏</div>
                      <p>不同动物的狩猎攻略</p>
                    </div>
                    <div class="info">
                      <span>2021-10-16 11:58</span>
                      <span>28460</span>
                      <span></span>
                      <span><a class="remove" href="#">删除</a></span>
                    </div>
                  </div>
                  <div class="reply-item">
                    <div class="user">
                      <div class="user-face">
                        <img src="images/user-2.jpg" alt="" />
                      </div>
                      <div class="user-name" style="color: white;">梓川枫的熊猫</div>
                      <p>在前期如何快速刷钱</p>
                    </div>
                    <div class="info">
                      <span>2021-10-16 11:58</span>
                      <span>324</span>
                      <span></span>
                      <span><a class="remove" href="#">删除</a></span>
                    </div>
                  </div>
                  <div class="reply-item">
                    <div class="user">
                      <div class="user-face">
                        <!-- <img src="images/user-3.jpg" alt="" /> -->
                        <img src="images/0.jpg" alt="" />
                      </div>
                      <div class="user-name" style="color: white;">猫一撮先生</div>
                      <p>求大佬带飞</p>
                    </div>
                    <div class="info">
                      <span>2021-10-16 12:09</span>
                      <span>493</span>
                      <span></span>
                      <span><a class="remove" href="#">删除</a></span>
                    </div>
                  </div>
                </div>
              </div>
              </div>
              <div id="new"></div>
          </p>
        </div>
      </div>
      <script>
        var div = document.querySelectorAll(".accordion")
        var main = document.querySelectorAll(".main")
        div.forEach((i,index) => {
          i.addEventListener("click",function(e){
            div.forEach(item=>{
              item.classList.remove("active")
            })
            this.classList.add("active")
          var panel = this.nextElementSibling
          main.forEach((i,indeOf)=>{
            i.style.display="none"
          })
          main[index].style.display="block"
          })
        });
        var btn = document.querySelectorAll("#btn")
        btn.forEach(item=>{
          item.addEventListener("click",function(){
        // 1.获取头像
        var img = document.getElementById("avatar").getAttribute("src");
        
        // 2.获取昵称
        var name = document.getElementById("name").value;
        // 3.获取评论内容
        var txt = document.querySelector("#txt").value;
        
        // 4.获取系统当前时间：年-月-日 时：分
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        var h = date.getHours();
        var mm = date.getMinutes();
        var curTime = `${y}-${m}-${d} ${h}:${mm}`;
        console.log(curTime);
        // 5.将1-4组合生成评论
        // 创建div
        var reply_item = document.createElement("div");
        reply_item.setAttribute("class","reply-item");
        var user =document.createElement("div");
        user.setAttribute("class","user");
        var user_face =document.createElement("div");
        user_face.setAttribute("class","user-face");
        //创建头像img节点
        var face_img = document.createElement("img");
        face_img.setAttribute("src",img);
        user_face.appendChild(face_img);
        // var face_img = `<img src="${img}" alt="" />`
        // user_face.innerHTML=face_img
        user.appendChild(user_face);
        //昵称追加进去
        var user_name = document.createElement("div");
        user_name.setAttribute("class","user-name");
        user_name.innerText=name;
        user.appendChild(user_name);
        // 评论追加进去
        var p = document.createElement("p");
        p.innerText=txt;
        user.appendChild(p);
        //时间、点赞、删除 追加进去
        var info = document.createElement("div");
        info.setAttribute("class","info");
        var infoHTML = `<span>${curTime}</span>
              <span>100</span>
              <span></span>
              <span><a class="remove" href="#">删除</a></span>`;
        info.innerHTML = infoHTML;
        reply_item.appendChild(user);
        reply_item.appendChild(info);
        

        // 6.将评论添加到评论列表
        var right = document.querySelector(".right");
        right.appendChild(reply_item);

        //7.点击发表评论后，将昵称和评论和内容清空
        document.getElementById("name").value="";
        document.getElementById("txt").value="";

        //8.点击删除将该评论删除，找到删除按钮，将该评论从父级删除
        var remove=document.querySelectorAll('.remove');
        remove.forEach(item => {
          item.addEventListener('click',function(){
            item.parentElement.parentElement.parentElement.parentElement;
            removeChild(item.parentElement.parentElement.parentElement);
          });
        })
        
        //页面加载完成的时候，给删除添加点击删除事件
        // function initRemove(){
        //   var remove=document.querySelectorAll('.remove')
        //   remove.forEach(item => {
        //     item.addEventListener('click',removed);
        //   })
        // }
        initRemove();
        function initImg(){
          var num = Math.floor(Math.random()*16);
          document.getElementById('avatar').src=`./images/${num}.jpg`;
        }
        window.onload=initImg;
          })
        })
      //   document.getElementById("btn").onclick=function(){
          
      // }
      </script>
       <script src="js/jsCode.js"></script>
       <script src="js/base.js"></script>
</body>
</html>